<template>
  <div class="menu">
    <div class="logo">美好钱箱</div>
    <div class="menuList">
      <el-menu :default-active="selected" :unique-opened="true" :router="true" text-color="#999999">
        <Item v-for="(item, idx) in menuList" :key="idx" :menu="item" :index="item.path"></Item>
      </el-menu>
    </div>
    <div class="version">v1.9.3</div>
  </div>
</template>

<script type="text/ecmascript-6">
import Item from './LeftMenuItem'
export default {
  props: {

  },
  data () {
    return {
      menuList: [
        {
          text: '订单',
          path: '/admin/order'
        },
        {
          text: '结算',
          path: '/admin/charge'
        },
        {
          text: '进入后台',
          path: '/admin/admin'
        }
      ]
    }
  },
  components: {
    Item
  },
  computed: {
    selected () {
      return this.$route.fullPath
    }
  }
}
</script>

<style lang="less">
  @import '../../assets/css/color';
  @logoHeight : 50px;
  @versionHeight : 32px;

  .el-menu {
    background-color: #3B3B3B;
  }

  .menu {
    position: relative;
    height: 100%;
  }

  .logo {
    color: #ffffff;
    line-height: @logoHeight;
    background-color: @blackColor;
    font-size: 16px;
    left: 0;
    right: 0;
  }

  .menuList {
    position: absolute;
    top: @logoHeight;
    bottom: @versionHeight;
    left: 0;
    right: 0;
    overflow-y: scroll;
  }

  .version {
    position: absolute;
    bottom: 0;
    height: @versionHeight;
    line-height: @versionHeight;
    right: 0;
    left: 0;
    text-align: center;
    background-color: #242222;
    color: #fff;
  }
</style>
